<%@ page language="java" contentType="text/html" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp" %>
<%@ page isELIgnored="true" %>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script type="text/javascript" src="m/js/jquery.min.js"></script>
<script type="text/javascript" src="m/js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="m/js/cart.js"></script>
<script type="text/javascript" src="m/js/jquery.msg.src.js"></script>
<script type="text/javascript" src="m/js/loginValid.js"></script>
<title>购物车</title>
<style type="text/css">
body{background:url("m/images/c_shop_bg2_listfood_long.jpg") repeat-y right;}
.clear{ clear:both;}
*{ margin:0; padding:0;}
.content{ width:100%; margin:0 auto; overflow:hidden; box-shadow: 0px 0px 2px #26282b;background:url(m/images/cart_bg.png);border:0px solid #272a2d; color:#686868;margin-top:40px;}
.content .order{margin:0 auto; padding:5px 10px 5px 10px;font-family:"黑体"; line-height:28px; position:relative;overflow:hidden;background:url("m/images/cart_line.png") repeat-x;background-position:bottom;}
.content .order .Designation{line-height:24px;color:#fff;}
.content .order .unit_price{line-height:32px;color:#fff;}
.content .order .unit_price .unit_price_txt{ float:left;overflow:hidden;margin-right:28px; margin-top:0px;}
.content .order .order_img{ float:left; width:20%; overflow:hidden;}
.content .order .order_img img{width:100%;}
.content .order .order_txt{ float:left; width:99%; overflow:hidden;}

.order .quantity .cut{ height:27px; background-image:url("m/images/cut2.png"); background-repeat:no-repeat;background-color:transparent; width:28px; border:none;background-size:contain; margin:3px 0px 0 0; vertical-align:bottom; background-size:containt;	}
.order .quantity .add{ height:27px;background-image:url("m/images/add2.png");background-repeat:no-repeat;background-color:transparent; width:28px; border:none;background-size:contain; margin:3px 0 0  0px ;vertical-align:bottom;	}
.order .quantity span{ vertical-align:bottom; overflow:hidden;height:32px;}
.order .quantity .quantity {text-align:center; background-repeat:no-repeat; width:42px; height:32px;margin:3px 0 0  0px ; background-size:cover;border:0px solid #2b2e31;background-color:transparent; overflow:hidden; line-height:32px;vertical-align:bottom;color:#fff; font-size:0.8em; }

.take_sure img{width:93%;margin-top:15px;margin-bottom:15px; margin-left:2.5%;}
</style>
</head>
<body>
<div class="clear"></div>
    <!-- div class="title" style="display:none;">订单信息</div> -->
	<div class="content" >
		<div id="content">
		</div>
	</div>
<div class="take_sure">
	<a href="javascript:submitOrder();" id="submit_order">
	<img src="m/images/take_order.png">
	</a>
</div>
<script type="text/html" id="temp">
<div class="order" id="order_${id}">
	<div>
		<div style="float:left;width:23%;">
			<img src="${images}" width=95%/>
		</div>
		<div>
			<div class="Designation" style="z-index:1;"><span style=" font-size:16px; font-family:"黑体";">${name}</span></div>
			<div class="unit_price">
				<div class="unit_price_txt" style="font-size:10px; font-family:"黑体";">单价：${price}元</div>
				<div class="quantity"  style="margin-right:5%;float:right;">
					<input type="button" class="add" data_id="${id}" >
					<input type="text" class="quantity" readOnly="readOnly" value="${number}" id="val_${id}">
					<input type="button" class="cut" data_id="${id}">
				</div>
			</div>
		</div>
	</div>
</div>
</script>
        
    

 

<script type="text/javascript">
$(function(){
	var data = $.cart.getAll();
	$("#temp").tmpl(data).appendTo("#content");
	//upTotal();
	$(".cut").click(function(){
		var id = $(this).attr("data_id");
		var number = parseInt($("#val_"+id).val());
		//alert(number);
		if(number > 1)
			number--;
		else {
			if(confirm("是否删除此菜品?")){
				$.cart.remove(id);
				$("#order_"+id).remove();
				upTotal();
			}
		}
		upNumber(id,number);
		$("#val_"+id).val(number);
	});
	$(".add").click(function(){
		var id = $(this).attr("data_id");
		var number = parseInt($("#val_"+id).val());
			number++;
		upNumber(id,number);
		$("#val_"+id).val(number);
	});
	$(".on_line").click(function(){
		$(this).addClass("check");
		$(".on_arrival").removeClass("check");
		$("#pay_type").val(1);
	});
	$(".on_arrival").click(function(){
		$(this).addClass("check");
		$(".on_line").removeClass("check");
		$("#pay_type").val(2);
	});
});
//更新总数
function upTotal(){
	$("#total_price").html("￥"+$.cart.totalPrice());
}
//更新数量
function upNumber(id,number){
	$.cart.updateNumber(id,number);
	//upTotal();
}
//删除订单
function deleteOrder(id){
	if(confirm("是否删除?")){
		$.cart.remove(id);
		$("#order_"+id).remove();
		//upTotal();
	}
}

//提交订单
function submitOrder(){
	var data ={};
	//验证用户是否登录
	var userId = '<%=request.getSession().getAttribute("userId")%>';
	//loginValid(userId);
	if(userId && userId !=null && userId !="" && userId != "null" && !!userId){
		data.userId = userId;
	}else{
		location.href = "user/login?cid=<%=request.getAttribute("loginId") %>";
		return ;
	}
	
	var length = $.cart.length();
	if(length <= 0)
	{
		$.messager.show("您没有购买物品!",1000,function(){
			location.href = "category?cid=<%=request.getAttribute("loginId") %>";
		});
		return;
	}
	data.totalPrice = $.cart.totalPrice();
	data.products = $.cart.getAll();
	data.shopinfo = data.products[0].restaurant;
	location.href = "orderminfo?shopInfo="+encodeURI(encodeURI(data.shopinfo))+"&totalPrice="+data.totalPrice+"&pcount="+$.cart.count()+"&cid=<%=request.getAttribute("loginId") %>" + "&id=<%=request.getSession().getAttribute("currentRestaurantId") %>";

}

</script>
</body>
<%@ include file="footer.jsp" %>
</html>